<template>
  <div :class="show ? 'body2' : 'body'">
    <nav-com title="系统升级" :showView="false" @back="backHandler()"></nav-com>
    <div class="wrapper">
      <h3 style="color: #000000; text-align: center">截图保存图片  </h3>
  
      <div style="background: white;border-radius: 10px;padding: 10px 0px; text-align: center;">
        <img
        :src="'https://api.qrserver.com/v1/create-qr-code?data=' + downURl"
        alt=""
        style=" width: 45vw"
      />
      </div>
    <h4 style="color: #000000; text-align: center">商城APP二维码 </h4>
    </div>
    <div class="content">
        <div style=" display: flex;flex-direction: column;align-items: center;margin-bottom: 20px;">
         
         <div style="font-size: 22px;font-weight: 500;font-family: PingFang SC;color: #000000; text-align: center;margin-bottom: -15px;z-index: 1000;">升级流程</div>  
         <div style="width: 150px;
            height: 15px;
            background: #EA5569;
            opacity: 0.4;
            border-radius: 9px;"> </div>
        </div>
       
      <div class="line">
        <div class="index">1</div>
        <span class="text">截图保存APP二维码到相册</span>
      </div>

      <div class="line">
        <div class="index">2</div>
        <span class="text">打开微信扫一扫-->点击相册-->打开二维码截图，扫码下载安装</span>
      </div>
      <div style='margin:15px;font-weight:600;line-height:26px'>（温馨提示：若下载安装失败，请先卸载原来APP，再重新扫码，进行下载安装）</div>
    </div>
  </div>
</template>
  
  <script>
import { iwant2return } from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from "vant";
export default {
  components: {
    navCom,
  },
  data() {
    return {
      show: false,
      downURl:"",
    };
  },
  created() {
    var host=window.location.protocol+"//"+window.location.host;
    this.downURl=host+ "/down/"
  },
  methods: {
    backHandler() {
      // this.$router.go(-1);
      this.$router.push('/upgradeTips');
    },
    toReturn() {
      //   this.show = true
    },
    toReturn() {
      iwant2return()
        .then((result) => {
          if (result.data.data[0] == "success") {
            // window.JS_TROOPS.download('https://thsystemfront.bigchun.com/down/index.html')
            this.show = true;
          } else {
            Toast("请稍后重试！");
          }
        })
        .catch((err) => {});
    },
  },
};
</script>
  
  <style scoped>
.body {
  position: relative;
  background-image: url(../../assets/my/upgrade.png);
  background-repeat: round;
  height: 100vh;
  /* overflow-y: hidden; */
}
.body2 {
}
.title-bg {
  height: 10px;
  width: 100px;
  background: rgba(234, 85, 105, 0.1);
  margin: 0 auto;
  border-radius: 5px;
  margin-top: -28px;
  margin-bottom: 10px;
}
.content {
  padding: 0vw 5vw;
  padding-top: 0px!important;
}
.line {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.dian {
  color: #ea5569;
  line-height: 8px;
  margin: 0 0 5px 6px;
}
.index {
  /* display: block; */
  height: 20px;
  width: 20px !important;
  background: #ea5569;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
}
.text {
  margin-left: 20px;
  width: 73vw;
  line-height: 26px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #2f2f30;
}
.button {
  height: 40px;
  width: 50vw;
  margin: 0 auto;
  background: #ea5569;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  margin-top: 60vh;
}
.wrapper {
  /* position: absolute; */
  margin: 0 auto;
  width: 60vw;
  margin-top: 15vh;
  /* height: 43vh; */
}
</style>